<template>
  <div class="app-container">
    <el-form  ref="queryForm" :inline="true">
      <el-form-item>
        <el-button
          size="mini"
          type="primary"
          @click="addType"
          v-hasPermi="['organization:post:add']"
        >新增分类</el-button>
        <el-button
          type="info"
          size="mini"
          @click="toggleExpandAll"
        >展开/折叠</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-if="refreshTable"
      v-loading="loading"
      :data="postList"
      row-key="postId"
      :default-expand-all="isExpandAll"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @row-click="viewDetail"
    >
      <el-table-column label="名称" align="left" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.postName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="postCode"  label="编码" align="center"></el-table-column>
      <el-table-column  label="操作" width="250" align="center">
        <template slot-scope="scope">
          <div class="org-oper" style="display: flex;">
            <div style="width: 80px;margin-right: 10px;">
              <el-button
                v-if="scope.row.postType === '0'"
                size="mini"
                type="primary"
                @click.stop="addPost(scope.row)"
                v-hasPermi="['organization:post:add']"
              >
                新增岗位
              </el-button>
            </div>
            <div style="width: 56px;margin-right: 10px;">
              <el-button
                size="mini"
                type="warning"
                @click.stop="update(scope.row)"
                v-hasPermi="['organization:post:edit']"
              >
                修改
              </el-button>
            </div>
            <div style="width: 56px;">
              <el-button
                size="mini"
                type="danger"
                @click.stop="handleDelete(scope.row)"
                v-hasPermi="['organization:post:remove']"
              >
                删除
              </el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 岗位编辑组件 -->
    <PostEdit v-if="editData.open" :prop="editData" @close="closePostEditPanel"></PostEdit>
    <!-- 岗位类型编辑组件 -->
    <PostTypeEdit v-if="typeEditData.open" :prop="typeEditData" @close="closeTypeEditPanel"></PostTypeEdit>
  </div>
</template>
s
<script>
  import {getList,del} from '@/api/organization/post/post.js'
  import PostEdit from '@/views/organization/post/postEdit.vue'
  import PostTypeEdit from '@/views/organization/post/postTypeEdit.vue'
  export default {
    name: "PostIndex",
    dicts: [],
    components: { PostEdit ,PostTypeEdit},
    data() {
      return {
        // 遮罩层
        loading: false,
        refreshTable:true,
        organizationData:[],
        // 岗位表格树数据
        postList:[],
        // 表格是否展开，默认全部折叠
        isExpandAll: false,
        //编辑组件数据
        open:false,
        editData:{
          open:false,
          title:'新增',
          parentId:null,
          parentName:null,
          editId:null
        },
        typeEditData:{
          open:false,
          title:'新增',
          editId:null
        },
      };
    },
    beforeCreate() {

    },
    created() {
      this.loading = true
    },
    beforeMount() {

    },
    mounted() {
      this.getList()
    },
    methods: {
      getList(){
        this.loading = true
        getList(this.queryParams).then(res =>{
          this.postList = this.handleTree(res.data, "postId","postParentId");
          this.loading = false
        }).catch(err =>{
          this.loading = false
          console.log('查询岗位数据错误原因：',err)
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 新增岗位 */
      addPost(row) {
        this.editData={
          open:true,
          title:'新增',
          parentId:null,
          parentName:null,
          editId:null
        }
        if (row != null && row.postId) {
          this.editData.parentId = row.postId;
          this.editData.parentName = row.postName;
          this.editData.parentSysCode = row.postSysCode
        }else{
          this.$message.warning("请选择一个分类")
        }
      },
      /** 新增岗位类型 */
      addType() {
        this.typeEditData={open:true,title:'新增',editId:null}
      },
      closePostEditPanel(closeParam){
        if(closeParam.isSaveData){
          this.getList()
        }
        this.editData={
          open:false,
          title:'新增',
          parentId:null,
          parentName:null,
          editId:null
        }
      },
      closeTypeEditPanel(closeParam){
        if(closeParam.isSaveData){
          this.getList()
        }
        this.typeEditData={open:false,title:'新增',editId:null}
      },
      /** 展开/折叠操作 */
      toggleExpandAll() {
        this.refreshTable = false;
        this.isExpandAll = !this.isExpandAll;
        this.$nextTick(() => {
          this.refreshTable = true;
        });
      },
      /** 修改岗位按钮操作 */
      update(row) {
        if(row.postType === '0'){
          this.typeEditData={open:true,title:'修改',editId:row.postId,parentSysCode:row.postSysCode}
        }else{
          //获取父类系统编码
          let parentNode = this.postList.find(item =>item.postId === row.postParentId)
          console.log(parentNode)
          this.editData={
            open:true,
            title:'修改',
            parentId:parentNode.postId,
            parentName:parentNode.postName,
            parentSysCode:parentNode.postSysCode,
            editId:row.postId
          }
        }
      },
      //查看岗位详情
      viewDetail(row){
        //只有岗位能查看详情
        if(row.postType === '1'){
          this.$router.push({name:'PostDetail',query: { postId: row.postId,title:'岗位详情'}})
        }
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('是否删除该岗位？','确认信息',{
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(()=>{
          del(row.postId).then(res =>{
            if(res.code === 200){
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.getList()
            }else{
              this.$message({
                type: 'warning',
                message: res.msg||'该岗位已被使用，无法删除'
              })
            }

          })
        }).catch(action => {

        });
      },
    },
  };
</script>
<style scoped>

</style>
